<template>
  <el-dialog
    :width="1600"
    v-model="formVisible"
    title="抽查对象-风险异常社会组织"
    @close="formCancel"
  >
    <div class="tip">
      <img src="@/assets/imgs/spotCheck/tip.png" alt="" />
      根据逃税漏税、税务评级、经营异常、财务异常等信息筛选信息
    </div>
    <div class="content">
      <div class="content-lentgh">共{{ list.length }}家</div>
      <div class="grid">
        <div class="grid-item" v-for="(it, index) in list" :key="it.orgId">
          <div class="grid-item-header">
            <div class="grid-item-serialNumber">{{ index + 1 }}</div>
            <div class="grid-item-tx">
              {{ it.orgName }}
            </div>
            <div class="grid-item-btns">
              <el-icon
                size="20"
                color="#999"
                style="cursor: pointer"
                @click="del(index)"
                ><Close
              /></el-icon>
            </div>
          </div>
          <!--<div class="grid-item-content">-->
          <!--  存在 <span>经营异常、财务异常</span>的问题-->
          <!--</div>-->
        </div>
      </div>
    </div>
    <template #footer>
      <div style="display: flex; justify-content: flex-end; width: 100%">
        <el-button @click="generate">重新生成</el-button>
        <el-button @click="formCancel">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Close } from '@element-plus/icons-vue'
import {
  intelligent,
  intelligentGet,
  intelligentSave
} from '@/api/spotCheck/spotCheck'
import { ElMessage } from 'element-plus'
const formVisible = ref(false)
const emit = defineEmits(['reload'])

const save = () => {
  formVisible.value = true
}

const formCancel = () => {
  formVisible.value = false
}

const list = ref([])
const init = () => {
  let data = {
    types: 1
  }
  intelligent(data).then((res) => {
    list.value = res.data || []
  })
}
const sorgSpotCheckPlanId = ref('')
const show = (id) => {
  list.value = []
  sorgSpotCheckPlanId.value = id
  init()
  formVisible.value = true
}
const submitForm = () => {
  if (list.value.length === 0) {
    ElMessage.error('请生成抽查对象')
    return
  }
  let data = {
    other: {
      types: 1
    },
    infos: list.value,
    sorgSpotCheckPlanId: sorgSpotCheckPlanId.value
  }
  const loading = ref(false)
  intelligentSave(data)
    .then((res) => {
      emit('reload')
      formCancel()
    })
    .finally(() => {
      loading.value = false
    })
}

const generate = () => {
  let data = {
    num: 1,
    types: 1
  }
  intelligentGet(data).then((res) => {
    list.value = res.data || []
  })
}
const del = (index) => {
  list.value.splice(index, 1);
}
defineExpose({ show })
</script>

<style scoped lang="scss">
.btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 0;
}
.tip {
  width: 100%;
  height: 34px;
  background: #f5f6f8;
  border-radius: 0px 0px 0px 0px;
  display: inline-flex;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  margin-bottom: 16px;
  img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    margin-left: 20px;
  }
}
.header {
  display: flex;
  align-items: center;
  padding-bottom: 21px;
  border-bottom: 1px solid #e9e9e9;
  margin-bottom: 10px;
  .tx {
    font-weight: 400;
    font-size: 18px;
    color: #333333;
  }
  .input {
    width: 66px;
    margin: 0 10px 0 20px;
  }
}
.content {
  width: 100%;
  .content-lentgh {
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    margin-bottom: 10px;
  }
  .grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    .grid-item {
      //width: 400px;
      border: 1px solid #e9e9e9;
      .grid-item-header {
        height: 38px;
        border-radius: 0px 0px 0px 0px;

        display: flex;
        box-sizing: border-box;
        padding: 0 10px;
        align-items: center;
        overflow: hidden;
        border-bottom: 1px solid #e9e9e9;
        .grid-item-serialNumber {
          width: 22px;
          height: 22px;
          background: #e9e9e9;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          border-radius: 50%;
        }
        .grid-item-tx {
          flex: 1;
          flex-shrink: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
        }
        .grid-item-btns {
          display: flex;
          padding-left: 10px;
          img {
            width: 19px;
            height: 19px;
            cursor: pointer;
          }
        }
      }
      .grid-item-content {
        width: 100%;
        box-sizing: border-box;
        padding: 9px 10px;
        overflow: hidden;
        font-weight: 300;
        font-size: 14px;
        color: #333333;
        text-align: center;
        span {
          color: #ff0000;
        }
      }
    }
  }
}
</style>
